<template>
	<div id="audition_edit" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		 
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				编辑试听
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row_0">
					<label class="label" style="width: 1rem;">班级封面图</label>
					<div class="cover_img" :style="{backgroundImage : 'url('+(param.photo||defaultImg)+')'}"></div>
					<div class="upload_btn" @click="selectFile()">上传图片</div>
					<input type="file" id="file" hidden accept="image/jpeg,image/jpg,image/png" />
				</div>
				<div class="row_1">
					<label class="must">*</label>
					<label class="label">班级名称</label>
					<el-input v-model="param.className" id="className" style="width: 2.6rem;" clearable maxLength="100"></el-input>
				</div>
				<div class="row_1">
					<label class="must">*</label>
					<label class="label">开课时间</label>
				   	<el-date-picker v-model="classDate" disabled
					    style="width: 2.6rem;" type="daterange"
					    align="center"  unlink-panels range-separator="至"
					    start-placeholder="开始日期" end-placeholder="结束日期"
					    value-format= "yyyy-MM-dd">
					</el-date-picker>
					&emsp;
				</div>
				
				<div class="row_1">
					<label class="must">*</label>
					<label class="label">课程名称</label>
					<el-input v-model="param.courseName" style="width:2rem" disabled></el-input>
					<el-input v-model="param.libraryCourseSyllabusName" style="width:1.9rem" disabled></el-input>
					
					&emsp;
					<label class="must"></label>
					<label class="label">课程类型</label>
					<el-input :value="courseTypeMap[param.courseType]" class="input" disabled></el-input>
					
					&emsp;&emsp;
					<label class="label_3">科目</label>
					<el-input :value="param.subjectName" class="input" disabled></el-input>
				</div>
				
				<div class="row_1" >
					<label class="must"></label>
					<label class="label">每次上课</label>
					<el-input v-model="param.oneCourseHour" style="width:0.8rem" disabled></el-input>
					&nbsp;节
					&emsp;&emsp;&emsp;
					<label class="must">*</label>
					<label class="label" style="width: 0.62rem;">每节课</label>
					<el-input v-model="param.oneCourseHourMinute" id="oneCourseHourMinute" maxLength="3" style="width:0.8rem"></el-input>
					&nbsp;分钟
					
					<template v-if="param.courseType==4">
						&emsp;&emsp;
						<label class="must">*</label>
						<label class="label">外教类型</label>
						<el-input :value="foreignTypeMap[param.foreignTeacherType]" class="input" disabled></el-input>
					</template>
				</div>
				
				<div class="row_1">
					<label class="must">*</label>
					<label class="label_2" style="letter-spacing: 0;">计划招生人数</label>
					<el-input v-model="param.recruitNum" id="recruitNum" maxLength="3" style="width: 1.57rem;"></el-input>
					&emsp;
					
					<label class="must"></label>
					<label class="label_3">教师</label>
					<el-select v-model="param.teacherUserId" class="input" placeholder="" filterable>
					    <el-option v-for="item in userList" :key="item.userId"
					    	:label="item.nickName" :value="item.userId">
					    </el-option>
					</el-select>
					&emsp;&emsp;
					<label class="label_3">助教</label>
					<el-select v-model="param.assisUserId" class="input" placeholder="" filterable>
					    <el-option v-for="item in userList" :key="item.userId"
					    	:label="item.nickName" :value="item.userId">
					    </el-option>
					</el-select>
					&emsp;&emsp;
					<label class="label_3">教室</label>
					<el-select v-model="param.classRoomId" class="input" placeholder="" filterable>
					    <el-option v-for="item in classroomList" :key="item.classroomId"
					    	:label="item.name" :value="item.classroomId">
					    </el-option>
					</el-select>
				</div>
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">保 存</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict,$file;

export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			param : {},
			campusId : null,
			//开课周期
			classDate : null,
			//根据校区更新
			userList : null,
			classroomList : null,
			//数据字典
			courseTypeMap : null,
			foreignTypeMap : null,
			//每周上课数,开课周期
			courseDate : null,
			defaultImg : require("../../../assets/img/clue_manage/default_class.png"),
			//最大学生数
			maxStudentNum : null
		}
	},
	watch : {
		"param.recruitNum" : function(val) {
			this.param.recruitNum = tool.parseInt(val);
		},
		"param.oneCourseHourMinute" : function(val) {
			this.param.oneCourseHourMinute = tool.parseInt(val);
		}
	},
	methods : {
		init : function(audition) {
			
			console.log(JSON.stringify(audition))
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			//当前校区id
			var campusId = vm.$store.state.campusId;
			//初始化参数
			vm.param = tool.clone(audition);
			
			//将对象的关联字段,无值的0转成"",为了匹配下拉框
			tool.change(/^0$/,"",vm.param,["teacherUserId","assisUserId","classRoomId"]);
			vm.classDate = [vm.param.startTime, vm.param.endTime];
			
			//当前校区id和上次校区id不一致才重新加载课程列表,减少请求次数
			if(vm.campusId != campusId) {
				vm.loadList();
				vm.campusId = campusId;
			}
			
			api.auditionSyllabus({classId : audition.classId}).then(function(data) {
				var numList = [];
				data.list.forEach(function(item) {
					numList.push(item.studentNum);
				});
				vm.maxStudentNum = Math.max.apply(null,numList);
			});
			
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		selectFile : function() {
			$file.click();
		},
		sure : function() {
			
			var p = tool.clone(vm.param);
			
			var minute = vm.param.oneCourseHourMinute;
			//定义检测规则
			var rules = [{
				judge : p.className,
				focus : $("#audition_edit #className"),
				tips : tips.blank
			},{
				judge : p.oneCourseHourMinute>0 && p.oneCourseHourMinute<=480,
				focus : $("#audition_edit #oneCourseHourMinute"),
				tips : "每节课请设1~480分钟"
			},{
				judge : p.recruitNum,
				focus : $("#audition_edit #recruitNum"),
				tips : tips.blank
			},{
				judge : vm.param.recruitNum >= vm.maxStudentNum,
				focus : $("#audition_edit #recruitNum"),
				tips : "计划招生人数不得小于已报名人数（"+ vm.maxStudentNum +"人）"
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			
			api.auditionUpdate(p).then(function(data) {
				tool.message({showClose: true, message: "试听班级保存成功", type: 'success'});
				vm.$emit('callback');
				vm.cancel();
			});
		},
		loadList : function() {
			var campusId = vm.$store.state.campusId;
			//用户列表
			api.userListByCampus({campusId : campusId}).then(function(data) {
				vm.userList = data.userList;
			});
			//教室列表
			api.getClassroomList({campusId : campusId}).then(function(data) {
				vm.classroomList = data.info;
			});
		}
	},
	mounted : function() {
		$file = $("#audition_edit #file");
		
		$file.change(function(){
			let f = $file[0].files[0];
			//没有文件,直接结束
			if(!f) {
				return;
			}
			var param = new FormData();
			param.append("file",$file[0].files[0]);
			
			api.uploadFile(param).then(function(data){
				vm.param.photo = data.url;
			})
		})
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict, true);
		//数据字典
		vm.courseTypeMap = tool.parseDict(dict["course_type"]);
		vm.foreignTypeMap =   tool.parseDict(dict["foreign_teacher_type"]);
	}
}
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/audition_add.css"></style>
<style scoped>
	.panel {
		width: 11.4rem;
	}
</style>
